<template>
    <el-cascader :options="options"
                v-model="model"
                 :props="defaultProps"
                 @change="change"
                 size="small"
    ></el-cascader>
</template>
<script>
    import {loadDropDown} from "./request";
    export default {
        name: 'XDCascader',
        props: ['value', 'list'],
        data() {
            return {
                model: "",
                lists: {},
                options: [],
                // options: [{
                //     value: '',
                //     label: 'Guidfdfdfdf',
                //     children: [{
                //         value: 'disciplifdfdfnes',
                //         label: 'Disciplifdfdfdfnes',
                //     }]
                // }, {
                //     value: '',
                //     label: 'Component',
                //     children: [{
                //         value: 'basic',
                //         label: 'Basic',
                //     }]
                // }],
                //
                //
                // defaultProps: {
                //     children: "children",
                //     label: "unitName",
                // },
                // lists: {
                //     url: '/riskCategory/getTree?',
                //     label: 'name',
                //     method: 'GET',
                //     value: 'id',
                //     data: {}
                // },
                //
                defaultProps: {
                    children: "children",
                    label: "name",
                    value: 'id'
                },
            }
        },
        created() {
            this.lists = this.list
            //this.getList()
            this.model = this.value
            this.defaultProps = this.list
        },
        mounted() {
            //this.model = this.value
        },
        methods: {
            change() {
                let len = this.model.length
                this.$emit('input', this.model[len-1])
            },
            // getList() {
            //     this.select = this.lists
            //     let requestJson = this.select
            //     if(requestJson.mineId) {
            //         requestJson.data.mineId = this.$store.state.mineId
            //     }
            //     if(requestJson.companyId) {
            //         requestJson.data.companyId = this.$store.state.companyId
            //     }
            //     loadDropDown(requestJson).then(response=>{
            //         let list = response.data
            //         let a = list.map(item=>({
            //             children: item[this.select.label],
            //             value: item[this.select.value]
            //         }))
            //         this.options = list
            //         console.log(list)
            //     }).catch(error => {
            //         console.log(error)
            //     })
            // },
            //选中的节点
            getNode(data, checked,child) {
                if(checked===true){
                    this.model = data.id
                    this.$refs.treeForm.setCheckedKeys([data.id]);
                }else{
                    if(this.model==data.id)
                        this.$refs.treeForm.setCheckedKeys([])
                }
                this.$emit('input', this.model)
            },
        },
        watch: {
            "value": function () {
                this.model = this.value
            }
        }
    }
</script>
<style lang="scss" scoped>
    :deep(.el-tree) {
        padding-top: 15px;
        padding-left: 10px;
        .el-tree-node {
            .is-leaf + .el-checkbox .el-checkbox__inner {
                display: inline-block;
            }
            .el-checkbox .el-checkbox__inner {
                display: none;
            }
        }
    }
</style>